<!DOCTYPE html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8"/>
    <title>Yobot修改密码</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
    <script src="{{ url_for('yobot_static', filename='password.js') }}"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
    <style>
        #app {
            margin: auto;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            max-width: 400px;
        }
		
		footer{
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 12px;
		}
		
		body {
		  margin:0;
		  text-align:center;
		}
		
		h1 {
		  font-family: 'Lato', sans-serif;
		  font-weight:300;
		  letter-spacing: 2px;
		  font-size:48px;
		}
		
		p {
		  font-family: 'Lato', sans-serif;
		  letter-spacing: 1px;
		  font-size:16px;
		}
		
		a{
			color: #000000;
		}
    </style>
</head>

<body>
<div id="app" class="container">
	<el-page-header @back="location='../'" content="Yobot修改密码"></el-page-header>
    <div class="container" style="margin-top: 4rem;">
        {% if error -%}
        <el-alert
                title="{{ error }}"
                type="error">
        </el-alert>
        {% endif -%}
        {% if success -%}
        <el-alert
                title="{{ success }}"
                type="success">
        </el-alert>
        {% endif -%}
        </el-alert>

        <div style="margin: 20px;"></div>
		<h1>修改密码</h1>
        <el-form ref="form" :model="form" :rules="rules" label-width="0px" style="width: 300px;">
            <el-form-item prop="pwd">
                <el-input v-model="form.pwd" placeholder="设置新的登录密码" type="password" @keyup.enter.native="onSubmit"></el-input>
            </el-form-item>
            <el-form-item prop="again">
                <el-input v-model="form.again" placeholder="再次输入密码确认" type="password" @keyup.enter.native="onSubmit"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="width: 100%;margin-top: 20px;">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<el-footer style="text-align: center;position: fixed;bottom: -10px;left: 50%;transform: translate(-50%, -50%);background-color: #66b1ff;color: #ffffff;
width: 100%;font-size:15px;">
    powered by <a href="https://github.com/pcrbot/yobot" style="text-decoration:none;color: #ffffff;">yobot</a>
</el-footer>

<script>
    var Userid = "{{ session['yobot_user'] }}";
    new Vue({
        el: '#app',
        data() {
            let validatePassAgain = (rule, value, callback) => {
                if (value !== this.form.pwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                form: {
                    pwd: "",
                    again: "",
                },
                rules: {
                    pwd: [
                        {required: true, message: '必须输入您的密码', trigger: 'blur'},
                        {min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur'},
                    ],
                    again: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {validator: validatePassAgain, trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            post: function (url, params) {
                //创建form表单
                const temp_form = document.createElement("form");
                temp_form.action = url;
                //如需打开新窗口，form的target属性要设置为'_blank'
                //temp_form.target = "_blank";
                temp_form.method = "post";
                temp_form.style.display = "none";
                //添加参数
                for (const key in params) {
                    const opt = document.createElement("textarea");
                    opt.name = key;
                    opt.value = params[key];
                    temp_form.appendChild(opt);
                }
                document.body.appendChild(temp_form);
                //提交数据
                temp_form.submit();
            },
            onSubmit: function () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const url = "{{ url_for('yobot_reset_pwd') }}";
                        this.post(url, {
                            pwd: getHashWithSalt(this.form.pwd + Userid)
                        });
                    } else {
                        console.log('请检查输入！');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>
